<template>
  <div class="Meteorologicaldataresources">
    <img class="bg" :src="require(`../../assets/newhome/${imgBg}.png`)" alt="" />
    <div class="content">
      <div class="text">
        {{ title }}
        <span class="messageSubscribe" v-if="title == '气象数据资源'" @click="goMessage('message')"  
          ><img src="../../assets/newhome/message.png" alt=""  />
          <slot name="message"></slot
        ></span>
      </div>
      <div class="toptexth1">
        <div class="toptextone" v-for="(item, index) in list" :key="index"  @click="toPage(item.togo)" >
          <a class="inletLineCom" href="javascript:void(0);">
            <img class="inletLineImg" :src="require(`../../assets/newhome/daohang/${item.src1}.png`)" alt="" />
            <span class="inletLineName">{{ item.name }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: String,
    list: Array,
    imgBg: String,
  },
  components: {},

  computed: {},

 

  methods: {
    goMessage(item){
      this.$router.push(item);
    },
    toPage(item) {
      this.$router.push(item);

      if (item == "undfind") {
        return this.$toast("暂未开放，敬请期待！");
      }
      if (item != "" && item != "undfind") {
        if (this.$store.getters.location.length == 0) {
          this.$toast("未获取到位置信息，请从左上角进行选择！");
          return;
        }
        // this.$router.push(item)
      } else {
        this.$toast("暂未开放，敬请期待！");
      }
    },
  },
};
</script>
<style scoped lang="less">
.Meteorologicaldataresources {
  position: relative;
  width: 345px;
  left: 50%;

  transform: translate(-50%, 50%);
  overflow: hidden;
  height: auto;

  .bg {
    position: absolute;
    width: 345px;
    height: 100%;
  }
  .content {
    position: relative;
    width: 345px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 25px;
    .text {
      width: 100%;

      font-size: 16px;
      font-weight: 500;
      color: #101010;

      .messageSubscribe {
        float: right;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #357cff;
        img {
          width: 19px;
          height: 19px;
          vertical-align: middle;
        }
      }
    }
    .toptexth1 {
      margin-top: 10px;

      z-index: 99;

      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
      .toptextone {
        flex-basis: calc(50% - 5px); /* 50%减去盒子之间的间距一半 */
        height: 44px;
        background: #ffffff;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
        border-radius: 5px;
        .inletLineImg {
          width: 20px;
          height: 20px;

          margin-right: 5px;
          vertical-align: middle;
        }
      }
      .toptextone11 {
        margin-right: auto;
        margin-left: 15px;
      }
      // .toptexttow {
      //   text-align: left;
      // }
    }
  }

  a {
    font-size: 15px;

    font-weight: 400;
    color: #101010;
  }
}
</style>
